<template>
  <div class="box1">
   <div class="block text-center">
     <span class="demonstration" style="font-size: 30px"
     >官方出品</span>
     <el-carousel height="250px" type="card" :interval="4000" style="width: 85%">
      <el-carousel-item v-for="item in officialMVList" :key="item">
        <img :src="item.cover" style="width:100%" @click="playMV(item.id)" class="img2">
      </el-carousel-item>
     </el-carousel>
    </div>


    <h1 style="font-size: 30px">最新</h1>
    <div class="firstBox">
      <div class="firstList" v-for="item in firstMV" :key="item">
        <img class="img1" :src="item.cover" @click="playMV(item.id)">
        <play-circle-filled  class="i" @click="playMV(item.id)"/>
        <p style="" @click="search1(item.name)"> {{item.name}}</p>
        <p style=""><span v-for="item in item.artists" :key="item" @click="search1(item.name)">{{item.name}}</span></p>
      </div>
    </div>

    <h1 style="margin-top: 40px;font-size: 30px">热门</h1>
    <div class="hotBox">
      <div class="hotList" v-for="item in hotMV" :key="item">
        <img class="img1" :src="item.cover" @click="playMV(item.id)">
        <play-circle-filled  class="i" @click="playMV(item.id)"/>
        <p style="" @click="search1(item.name)">{{item.name}}</p>
        <p style=""><span v-for="item in item.artists" :key="item" @click="search1(item.name)">{{item.name}}</span></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import {ref} from "vue"
import axios from "axios";
import {baseURL} from "@/request/index.js";
import {useMVStore,useSongsStore} from "@/Store/Pinia/pinia";
const mvstore=useMVStore();
const router=useRouter();
const officialMVList=ref([]);
const firstMV=ref([]);
const hotMV=ref([]);
const mvurl=ref('');
const getofficialMV=()=>{ //获取官方mv
  axios.post(baseURL+"/mv/exclusive/rcmd?limit=10").then((res)=>{
    // console.log(res);
    officialMVList.value=res.data.data;
  })
}
const getfirstMV=()=>{  //获取最新MV
  axios.post(baseURL+"/mv/first?limit=8").then((res)=>{
    // console.log(res);
    firstMV.value=res.data.data;
  })
}
const gethotMV=()=>{  //获取最新MV
  axios.post(baseURL+"/mv/all?order=最热&limit=4").then((res)=>{
    // console.log(res);
    hotMV.value=res.data.data;
  })
}
getofficialMV();
getfirstMV();
gethotMV();
function playMV(mvid){
  axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}
const songsStore=useSongsStore();
function search1(value){
  songsStore.show=1;
  songsStore.search(value);
  router.push({path:'/homePage/searchList/1'})
}
</script>

<style scoped>
.box1{
  width: 100%;
  height: 450px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.firstBox{
  display: flex;
  flex-wrap:wrap;
}

.firstBox .firstList{
  width: 220px;
  height: 220px;
  margin-right: 50px;
  margin-top: 30px;
  transition:All 0.4s ease-in-out;
  position: relative;
}
.firstBox .firstList:hover{
  transform:translate(0,-20px);
}
.firstBox .firstList p:hover,.hotBox .hotList p:hover{
  color: #8e09dc;
  cursor: pointer;
}
.firstBox .firstList .i , .hotBox .hotList .i{
  color: white;
  position: absolute;
  left: 70px;
  top:50px;
  opacity:0;
  font-size: 80px;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
}
.firstBox .firstList .i:hover,.hotBox .hotList .i:hover{
  opacity: 1;
}
.hotBox{
  display: flex;
  flex-wrap:wrap;
}

.hotBox .hotList{
  width: 220px;
  height: 220px;
  margin-right: 50px;
  margin-top: 30px;
  transition:All 0.4s ease-in-out;
  position: relative;
}
.hotBox .hotList:hover{
  transform:translate(0,-20px);
}
.hotBox .hotList .img1{
  width: 220px;
  height: 180px;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.firstBox .firstList .img1{
  width: 220px;
  height: 180px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>